<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
<title>发布信息</title>

<link href="css/addGoods.css" rel="stylesheet" type="text/css" />

<script src="js/jquery-3.1.0.min.js"></script>

<script>
   
    
	$(document).ready(function() {
		 var count=0;
		$("#de").click(function() {
			count = $("#count").text() - 1;
			if(count<=0){
			    count=0;
			    $("#ms5").text("数量不能为零");
			}
			$("#count").text(count);
		});
		$("#ad").click(function() {
		    $("#ms5").text("");
			count = $("#count").text()*1 + 1*1;
			$("#count").text(count);
			
			var post = 'addSaleGood.action?good.listType=sale&good.state=1&good.count='+count;
			$("#mss").attr("action",post);
		});
		
		var nameMsg = "";
		var detailMsg = "";
		var priceMsg = "";
		var errorMsg = "输入內容不符合要求";
	    var rightMsg = "符合要求";
	
	$("#name").blur(function() {
			var name = $("#name").val();
			var checkName = /[\u4e00-\u9fa5_a-zA-Z0-9_]{1,12}/;
			if(checkName.test(name)==false){
			     nameMsg = errorMsg;
			    $("#ms1").text(nameMsg);
			}else{
			   nameMsg = rightMsg;
			   $("#ms1").text(nameMsg);
			}
		});

    $("#ms2").text(detailMsg);

	$("#price").blur(function(){
	      var price = $("#price").val();
	      var checkPrice=/^(0|[1-9][0-9]{0,9})(\.[0-9]{1,2})?$/;
	      if(checkPrice.test(price)==false){
			    priceMsg = errorMsg ;
			    $("#ms3").text(priceMsg);
			}else{
			   priceMsg = rightMsg;
			   $("#ms3").text(priceMsg);
			}
	});
	
	 $("#type1").click(function(){
	     if(nameMsg==errorMsg||priceMsg==errorMsg||count==0){
               alert("存在輸入不符合，請重新輸入");
         }else{

            $("#mss").submit();
         }
   });
	
	$("#type2").click(function() {
			$("#ms1").text(" ");
			$("#ms2").text(" ");
			$("#ms3").text(" ");
			$("#ms4").text(" ");
			$("#count").text(0);
			$("#pic").attr("src","img/addjpg.jpg");
		});

  
   //上传图片
   
     	$(function() {
		$("#pic").click(function() {
			
			$("#upload").on("change", function() {
			    var imgSize =this.file[0].size;
				 if(imgSize<1024*1024*2){
                       $("#ms4").text("图片符合");	
                       var objUrl = window.URL.createObjectURL(this.files[0]); 
					   $("#pic").attr("src", objUrl); 		
                 }else{
                       $("#pic").attr("src", "img/addjpg.jpg"); 
                       $("#ms4").text("图片大小在2M以外，为："+imgSize/(1024*1024)+"M，请重新选择");
                 }
			});			
			$("#upload").click(); 
	    });
	});

});
</script>



</head>
<body>
</head>
<body style="background-color:#708090;">
	<div id="main">
		<div class="box1">
		   <h2 style="position:block;margin-left:16%">我要发布代购信息</h2>
			<div class="show">
			   <h4>填写代购物品的详细信息：</h4>
				<form action=""  method="post" id="mss" enctype="multipart/form-data">
				<table border="0">
					<tr>
						<td>物品的名称：</td>
						<td><input type="text" name="good.goodName" placeholder="中文，英文，数字  1-12长度" id="name"/><span id="ms1"></span>
						</td>
					</tr>
					<tr>
						<td>类&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;型：</td>
						<td><select name="good.type" id="types">
								<option value=1>电子产品</option>
								<option value=2>服装服饰</option>
								<option value=3>美妆饰品</option>
								<option value=4>食品饮料</option>
								<option value=5>婴幼用品</option>
								<option value=6>文学著作</option>
						</select></td>
					</tr>
					<tr></tr>
					<tr> 
						<td>数&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;量：</td>
						<td  style="vertical-align:top;">
						   <a id="de"><img src="img/de.png"></a>
						   <span style="font-size:22px;margin-bottom:15px;" id="count">0</span>
						   <a id="ad"><img src="img/ad.png"></a><span id="ms5">数量不能为零</span>
						</td>
					</tr>
					<tr></tr>
					<tr>
						<td style="vertical-align:top;">详 细 描 述：</td>
						<td><textarea rows="10" cols="60" name="good.briefing" id="detail"></textarea>
						<br/><br/><span id="ms2"></span>
						</td>
					</tr>
					<tr></tr>
					<tr>
					     <td style="vertical-align:top;">添 加 图 片：</td>
					     <td style="vertical-align:top;">
					       <img id="pic" src="img/addjpg.jpg" /><br/>
					       <span id="ms4">图片大小不能超过2M</span>
                           <input id="upload" name="image" type="file" style="display:none"/>
					     </td>
		  
					</tr>
					<tr>
						<td>估&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;价：</td>
						<td><input type="text" name="good.price" id="price" placeholder="数字，小数点，最多两位小数   不能为负"/>  RMB
						<span id="ms3"></span>
						</td>
					</tr>
					<tr></tr>
					<tr>
					    <td></td>
						<td><input type="button" value="发            布" id="type1" style="width:20%"/>
						<input type="reset" value="重            置  " id="type2"style="width:20%"/>
						<a href="javascript:history.back(-1)" id="type3"style="width:20%">取            消</a>
						</td>
					</tr>
				</table>
				</form>
			</div>
		</div>
	</div>
</body>
</html>